---
layout: example
categories: example/v1.0.0
version: v1.0.0
title: Filtering markers
description: Show a different set of markers based on user interaction.
tags:
  - ui
  - markers
---

<style>
.menu-ui {
  background:#fff;
  position:absolute;
  top:10px;right:10px;
  z-index:1;
  border-radius:3px;
  width:120px;
  border:1px solid rgba(0,0,0,0.4);
  }
  .menu-ui a {
    font-size:13px;
    color:#404040;
    display:block;
    margin:0;padding:0;
    padding:10px;
    text-decoration:none;
    border-bottom:1px solid rgba(0,0,0,0.25);
    text-align:center;
    }
    .menu-ui a:first-child {
      border-radius:3px 3px 0 0;
      }
    .menu-ui a:last-child {
      border:none;
      border-radius:0 0 3px 3px;
      }
    .menu-ui a:hover {
      background:#f8f8f8;
      color:#404040;
      }
    .menu-ui a.active,
    .menu-ui a.active:hover {
      background:#3887BE;
      color:#FFF;
      }
</style>
<nav id='menu-ui' class='menu-ui'>
  <a href='#' class='active' id='filter-all'>All taquerias</a>
  <a href='#' id='filter-beer'>Great margaritas</a>
</nav>
<div id='map'></div>

<script>

    var map = L.mapbox.map('map')
      .setView([37.77396, -122.4366], 12)
      .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));

    var myFeatureLayer = L.mapbox.featureLayer('/mapbox.js/assets/data/sf_locations.geojson')
        .addTo(map);

    var food = document.getElementById('filter-beer');
    var all = document.getElementById('filter-all');

    food.onclick = function(e) {
        all.className = '';
        this.className = 'active';
        // The setFilter function takes a GeoJSON feature object
        // and returns true to show it or false to hide it.
        myFeatureLayer.setFilter(function(f) {
            return f.properties['marker-symbol'] === 'bar';
        });
        return false;
    };

    all.onclick = function() {
        food.className = '';
        this.className = 'active';
        myFeatureLayer.setFilter(function(f) {
            // Returning true for all markers shows everything.
            return true;
        });
        return false;
    };
</script>
